<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">派单时间</div>
                <el-date-picker v-model="search.time_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"/>
                <div class="search-input">版单交期</div>
                <el-date-picker v-model="search.deliver_time_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"/>
                <div class="search-input">工厂</div>
                <el-select v-model="search.supplier_id" filterable placeholder="请选择工厂" clearable>
                    <el-option v-for="item in apply" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id" />
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border show-summary>
                <el-table-column type="selection"  align="center" width="50" sortable></el-table-column>
                <el-table-column label="工厂" prop="referred_as" align="center" sortable></el-table-column>
                <el-table-column label="版单数量合计" prop="total_count" align="center" sortable></el-table-column>
                <el-table-column label="按时完成数量" prop="finish_count" align="center" sortable></el-table-column>
                <el-table-column label="按时完成率" align="center" sortable>
                    <template #default="{row}">
                        <div>
                            {{row.finish_ratio}}%
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="初版通过数" prop="edit0_count" align="center" sortable></el-table-column>
                <el-table-column label="初版通过率" align="center" sortable>
                    <template #default="{row}">
                        <div>
                            {{row.edit0_ratio}}%
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="修版1通过数" prop="edit1_count" align="center" sortable></el-table-column>
                <el-table-column label="修版1通过率" align="center" sortable>
                    <template #default="{row}">
                        <div>
                            {{row.edit1_ratio}}%
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="修版2通过数" prop="edit2_count" align="center" sortable></el-table-column>
                <el-table-column label="修版2通过率" align="center" sortable>
                    <template #default="{row}">
                        <div>
                            {{row.edit2_ratio}}%
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="取消数量" prop="cancel_count" align="center" sortable></el-table-column>
                <el-table-column label="取消率" align="center" sortable>
                    <template #default="{row}">
                        <div>
                            {{row.cancel_ratio}}%
                        </div>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>

<script>
export default {
	name: 'user',
	data() {
		return {
			group: [],
			apiObj: this.$API.develop.edition.reportTable,
			selection: [],
			search: {
				supplier_id: null,
                time_range:null,
				deliver_time_range: null,
			},
            printArr:'',
            apply:[],//工厂-- 供应商
		}
	},
	mounted() {
        this.getApply()
	},
	methods: {
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
        table_add(row){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add').setColor(row)
			})
        },
		//编辑
		table_edit(row) {
            console.log('row :>> ', row);
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
		//删除
		async table_del(row, index) {
			var reqData = { id: row.id }
			var res = await this.$API.goods.getGoods.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.tableData.splice(index, 1);
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        selectionChange(selection) {
			this.selection = selection;
		},
        // 获取客户
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.apply = res.data;
        },
	}
}
</script>

<style lang="scss">
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
